/*
 * @Author: kanglang
 * @Date: 2020-11-23 18:02:07
 * @LastEditors: kanglang
 * @LastEditTime: 2021-06-08 18:17:29
 * @Description: 绑定手机
 */
import React, { Component } from 'react';
import {
  StyleSheet, Text, View, ScrollView, BackHandler
} from 'react-native';
import { msg } from '@/common';
import { px2dp } from '@/styles';
import XmInput from '../components/xm-input';
import LoginBtn from '../components/login-btn';
import { isAndroid } from '../../../common/styles';

export default class InputMobile extends Component {
  constructor(props) {
    super(props);
    const { navigation } = props;
    const state = navigation.state || {};
    const params = state.params || {};
    this.state = {
      mobile: '',
      keyboardHeight: 0,
      newMobile: '',
      params
    };
  }

  // UNSAFE_componentWillMount() {
  //   this._keyboardDidHide();
  // }

  componentDidMount() {
    const { params } = this.state;
    const { user } = params;
    this.setState({
      user: user,
      newMobile: user.mobile
    });
    if (isAndroid) {
      BackHandler.addEventListener('hardwareBackPress', this.onBackPressed);
    }
  }

  componentWillUnmount() {
    if (isAndroid) {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackPressed);
    }
  }

  onChangeText = (name, value) => {
    this.setState({ [name]: value });
  }

  onPressLogin = () => {
    const { mobile, user, newMobile, params } = this.state;
    const { routerFrom } = params;
    msg.emit('router: goToNext', {
      routeName: 'InputCode',
      mobile: mobile || newMobile,
      routerFrom,
      userInfo: user
    });
  }

  onBackPressed = () => {
    msg.emit('router: back');
    return true;
  }

  onClear = () => {
    this.setState({ mobile: '' });
  }

  render() {
    const { mobile, newMobile, params } = this.state;
    const isActive = (mobile !== '' && mobile.length === 11) ||
      (newMobile && newMobile !== '' && newMobile.length === 11);
    const { routerFrom } = params;
    return (
      <ScrollView
        style={{ backgroundColor: '#fff' }}
        keyboardShouldPersistTaps='always'
        ref='scroll'
      >
        <View style={styles.container}>
          <View
            style={{ marginTop: 40 }}
            onStartShouldSetResponderCapture={(e) => { }}
          >
            <View style={styles.bindWrap}>
              <Text style={styles.bindPhone}>绑定手机号</Text>
              <Text style={styles.needBid}>为了安全，我们会向你的手机发送验证码</Text>
            </View>
            <View style={{ marginTop: px2dp(80) }}>
              {
                routerFrom === 'setPwd' ?
                  <XmInput
                    defaultValue={newMobile}
                    editable={false}
                    name='mobile'
                    placeholder='请输入手机号'
                    onChange={this.onChangeText}
                  /> :
                  <XmInput
                    name='mobile'
                    placeholder='请输入手机号'
                    onChange={this.onChangeText}
                    onClear={this.onClear}
                  />
              }

            </View>
          </View>
          <LoginBtn
            disabled={!isActive}
            btnText='下一步'
            submit={this.onPressLogin}
          />
        </View>
      </ScrollView>
    );
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0
    });
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    alignItems: 'center'
  },
  pwdWrap: {
    width: '100%',
    marginTop: px2dp(20),
    justifyContent: 'center'
  },
  sendBtn: {
    position: 'absolute',
    right: 0,
    borderWidth: 0,
    fontSize: px2dp(28),
    backgroundColor: 'transparent',
  },
  bindPhone: {
    color: '#333232',
    fontSize: 22
  },
  needBid: {
    color: '#999796',
    fontSize: 14,
    marginTop: 6
  },
  bindWrap: {
    paddingHorizontal: px2dp(24)
  }
});
